/* 基类：基于 最大屏幕 + 有侧边栏 下进行适配 */

html {
  @media (max-width: 1760px) {
    #live2d-widget {
      visibility: hidden;
    }
  }

  @media (max-width: 1400px) {
    .joe {
      &_vplayer {
        height: 450px;
      }

      &_photos {
        &__list {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      &_video {
        &__list {
          &-item {
            .item {
              .thumb {
                height: 210px;
              }
            }
          }
        }

        &__detail {
          &-info {
            .thumbnail {
              width: 165px;
              height: 235px;
            }
          }
        }

        &__player {
          &-play {
            height: 480px;
          }
        }
      }

      &_live {
        &__play {
          &-player {
            height: 500px;
          }
        }
      }

      &_detail {
        &__article {
          &-video {
            .play .box iframe {
              height: 500px;
            }
          }
        }

        &__leaving {
          &-list {
            height: 450px;
          }
        }

        &__related {
          &-content {
            .item {
              img {
                height: 100px;
              }
            }
          }
        }
      }

      &_owo {
        &__contain {
          .box .scroll .item {
            width: calc(100% / 15);
          }
        }
      }

      &_list {
        &__item {
          &.single {
            .thumbnail {
              height: 250px;
            }
          }

          &.multiple {
            .thumbnail {
              grid-template-rows: 160px;
            }
          }
        }
      }

      &_census {
        &__server {
          &-item {
            .content {

              #work,
              #flow {
                height: 300px;
              }
            }
          }
        }
      }
    }
  }

  @media (max-width: 1100px) {
    .joe {
      &_header {
        &__above {
          &-search {
            .input {
              width: 70px;

              &:focus {
                width: 170px;
              }
            }
          }
        }
      }
    }
  }

  @media (max-width: 1200px) {
    .joe {
      &_vplayer {
        height: 430px;
      }

      &_detail {
        &__friends {
          grid-template-columns: repeat(2, 1fr);
        }

        &__article {
          &-video {
            .play .box iframe {
              height: 430px;
            }

            .episodes .box {
              grid-template-columns: repeat(5, 1fr);
            }
          }
        }

        &__leaving {
          &-list {
            height: 400px;
          }
        }

        &__related {
          &-content {
            .item {
              img {
                height: 90px;
              }
            }
          }
        }
      }

      &_video {
        &__list {
          &-item {
            grid-template-columns: repeat(4, 1fr);

            .item {
              .title {
                height: 34px;
                line-height: 34px;
              }
            }
          }
        }

        &__detail {
          &-info {
            .thumbnail {
              width: 155px;
              height: 220px;
            }
          }
        }

        &__player {
          &-play {
            height: 450px;
          }
        }

        &__source {
          &-list {
            grid-template-columns: repeat(5, 1fr);
          }
        }
      }

      &_owo {
        &__contain {
          .box .scroll .item {
            width: calc(100% / 12);
          }
        }
      }

      &_live {
        &__play {
          &-player {
            height: 430px;
          }
        }

        &__list {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      &_list {
        &__item {
          &.single {
            .thumbnail {
              height: 210px;
            }
          }

          &.multiple {
            .thumbnail {
              grid-template-rows: 125px;
            }
          }

          &.default {
            .thumbnail {
              width: 185px;
              height: 125px;
            }
          }
        }
      }

      &_index {
        &__ad {
          &-link {
            .image {
              height: 180px;
            }
          }
        }

        &__hot {
          &-list {
            column-gap: 10px;

            .item .link .inner .image {
              height: 90px;
            }
          }
        }

        &__banner {
          display: block;

          &-recommend {
            padding-top: 15px;
            width: 100%;
            margin-left: 0;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;

            &.noswiper {
              padding-top: 0;
            }

            .item {
              height: 145px;
              margin: 0 !important;
            }
          }
        }
      }

      &_header {
        &__above {
          &-logo {
            padding-right: 0;

            &::after {
              display: none;
            }
          }
        }
      }

      &_census {
        &__basic {
          &-item {
            &.category {
              #category {
                height: 220px;
              }
            }
          }
        }

        &__server {
          grid-template-columns: 45% 1fr;

          &-item {
            .content {

              #work,
              #flow {
                height: 280px;
              }
            }
          }
        }

        &__lately {
          .content {
            #lately {
              height: 280px;
            }
          }
        }
      }
    }

    .swiper-container {
      height: 360px;

      .item {
        height: 360px;
      }
    }
  }

  @media (max-width: 1130px) {
    .joe {
      &_index {
        &__banner {
          .swiper-container {
            height: 350px;

            .item {
              height: 350px;

              .title-row {
                padding: 10px 80px 10px 14px;

                .title {
                  font-size: 16px;
                }

                .subtitle {
                  font-size: 13px;
                }
              }
            }
          }
        }
      }

      &_list {
        &__item {
          &.default {
            .meta {
              .categories {
                li {
                  display: none;

                  &:nth-child(1) {
                    display: flex;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  @media (max-width: 1000px) {
    .joe {
      &_header {
        &__above {
          &-nav {
            .item .m-icon {
              display: none;
            }
          }
        }
      }
    }
  }

  @media (max-width: 992px) {
    .toc-container {
      display: none !important;
    }

    .aside-expander {
      display: none;
    }

    .joe {
      &_vplayer {
        height: 400px;
      }

      &_aside {
        display: none;
      }

      &_video {
        &__player {
          &-play {
            height: 400px;
          }
        }
      }

      &_live {
        &__play {
          &-player {
            height: 400px;
          }
        }
      }

      &_index {
        &__hot {
          &-list {
            .item .link .inner .image {
              height: 95px;
            }
          }
        }

        &__banner {
          &-recommend {
            .item {
              height: 135px;
              margin: 0 !important;
            }
          }

          .swiper-container {
            height: 340px;

            .item {
              height: 340px;
            }
          }
        }
      }

      &_detail {
        &__article {
          img {
            max-width: 100% !important;
          }

          &-video {
            .play .box iframe {
              height: 400px;
            }

            .episodes .box {
              grid-template-columns: repeat(5, 1fr);
            }
          }
        }

        &-wrapper {
          padding: 0;
        }

        &__leaving {
          &-list {
            height: 350px;
          }
        }

        &__related {
          &-content {
            .item {
              img {
                height: 90px;
              }
            }
          }
        }
      }

      &_census {
        &__basic {
          grid-template-columns: unset;
        }

        &__lately {
          .content {
            #lately {
              height: 265px;
            }
          }
        }

        &__server {
          grid-template-columns: unset;

          &-item {
            .content {

              #work,
              #flow {
                height: 250px;
              }
            }
          }
        }
      }
    }
  }

  @media (max-width: 768px) {
    .joe {
      &_vplayer {
        height: 225px;
      }

      &_header {
        top: 0;
        height: 55px;
        animation-fill-mode: backwards;

        &__above {
          .joe_container {
            height: 55px;
            justify-content: space-between;
          }

          &-nav {
            display: none;
          }

          &-logo {
            height: 55px;
            margin-right: 0;

            img {
              max-height: 45px;
            }
          }

          &-search {
            display: none;
          }

          &-searchicon {
            display: block;
            margin-left: 0;
          }

          &-slideicon {
            display: block;
          }
        }

        &__below {
          display: none;
        }

        &__searchout {
          top: 55px;
        }
      }

      &_main {
        .code-toolbar {
          pre[class*="language-"] {
            &.c_hover_tools {

              .code-expander,
              .copy-button {
                pointer-events: auto;
                opacity: 1;
              }
            }
          }
        }
      }

      &_index {
        &__banner {
          &-recommend {
            gap: 10px;

            .item {
              height: 100px;
            }
          }

          .swiper-container {
            height: 300px;

            .item {
              height: 300px;

              .title {
                font-size: 15px;
              }
            }
          }

          &-empty {
            height: 300px;
          }
        }

        &__hot {
          &-list {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
          }
        }

        &__ad {
          &-link {
            .image {
              height: 120px;
            }
          }
        }

        &__title {

          &-title {
            .item {
              display: none;

              &:nth-child(1),
              &:nth-child(2) {
                display: block;
              }
            }
          }
        }
      }

      &_list {
        &__item {
          .information {
            .title {
              font-size: 16px;
            }

            .abstract {
              display: none;
            }
          }

          .meta {
            .last {
              display: none !important;
            }
          }

          &.single {
            .thumbnail {
              height: 130px;
              margin-bottom: 0;

              time,
              svg {
                display: none;
              }
            }
          }

          &.default {
            .information {
              .title {
                font-size: 15px;
              }
            }

            .thumbnail {
              width: 120px;
              height: 80px;
              margin-right: 10px;

              time,
              svg {
                display: none;
              }
            }

            .title {
              margin-bottom: 0;
            }

            .meta {
              .items {
                li {
                  display: none;

                  &:nth-child(1) {
                    display: block;
                  }

                  &:nth-child(2) {
                    display: block;

                    &::after {
                      display: none;
                    }
                  }
                }
              }
            }
          }

          &.multiple {
            .thumbnail {
              grid-template-rows: 70px;
              gap: 10px;
            }
          }

          &.none {
            .information {
              height: 120px;
            }

            .abstract {
              display: -webkit-box;
              font-size: 13px;
            }
          }
        }

        &__loading {
          .item {
            .thumbnail {
              width: 120px;
              height: 80px;
            }

            .information {
              .title {
                margin-bottom: 10px;
                height: 20px;
              }

              .abstract {
                p {
                  height: 15px;
                }
              }
            }
          }
        }
      }

      &_photos {
        &__list {
          grid-template-columns: repeat(2, 1fr);
        }

        &__pagination {
          justify-content: center;
        }
      }

      &_detail {
        &__friends {
          grid-template-columns: repeat(1, 1fr);
        }

        &__title {
          font-size: 18px;
        }

        &__count {
          &-information {
            width: 100%;

            .avatar {
              display: none;
            }

            .meta {
              width: 100%;
              height: unset;

              .author {
                display: none;
              }

              .item {
                justify-content: center;
              }
            }
          }

          &-created {
            display: none;
          }

          &::after {
            display: none;
          }
        }

        &__overdue {
          &-wrapper {
            padding: 10px;

            .title {
              margin-bottom: 5px;
              font-size: 14px;

              .icon {
                margin-right: 5px;
              }
            }

            .content {
              font-size: 13px;
              padding-left: 0;
            }
          }
        }

        &__article {
          padding: 10px 0;
          font-size: 14px;

          pre[class*="language-"] {
            font-size: 13px;
          }

          iframe {
            width: 100%;
            min-height: 220px;
            min-width: initial;
          }

          video {
            width: 100%;
            min-width: initial;
          }

          &-video {
            .play {
              .box {
                iframe {
                  height: 225px;
                }
              }
            }

            .episodes {
              .box {
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;
              }
            }
          }
        }

        &__leaving {
          &-list {
            height: 300px;

            .item {
              font-size: 12px;
              width: 160px;
              min-height: unset;

              .user {
                padding: 0 8px;
                height: 35px;

                .avatar {
                  width: 15px;
                  height: 15px;
                }
              }

              .wrapper {
                padding: 8px;

                .content {
                  height: 109px;
                  line-height: 18px;

                  .owo_image {
                    max-height: 18px;
                  }
                }
              }
            }
          }
        }

        &__copyright {
          .content {
            .item {
              font-size: 13px;

              .icon {
                width: 16px;
                height: 16px;
              }
            }
          }
        }

        &__related {
          &-content {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;

            .item {
              img {
                height: 80px;
              }

              h6 {
                font-size: 12px;
              }
            }
          }
        }
      }

      &_video {
        &__list {
          &-item {
            grid-template-columns: repeat(2, 1fr);

            .item {
              .thumb {
                height: 200px;
              }
            }
          }
        }

        &__pagination {
          justify-content: center;
        }

        &__detail {
          &-info {
            .thumbnail {
              width: 125px;
              height: 180px;
            }

            .description {
              dt {
                font-size: 16px;
                margin-bottom: 8px;
              }

              dd {
                font-size: 12px;
                margin-bottom: 5px;
                line-height: 20px;
                max-height: 40px;

                &:not(:last-child) {
                  -webkit-line-clamp: 1;
                }
              }
            }
          }
        }

        &__player {
          &-play {
            height: 225px;
          }
        }

        &__source {
          &-list {
            grid-template-columns: repeat(3, 1fr);
          }
        }
      }

      &_live {
        &__pagination {
          justify-content: center;
        }

        &__list {
          grid-template-columns: repeat(1, 1fr);
        }

        &__play {
          &-player {
            height: 185px;
          }
        }
      }

      &_footer {
        .joe_container {
          flex-direction: column;
          justify-content: center;
          padding-top: 10px;
          padding-bottom: 10px;

          >.item {
            padding: 5px 0;
            text-align: center;
          }

          .side-col {
            align-items: center;
          }
        }
      }

      &_owo {
        &__contain {
          .box .scroll {
            .item {
              width: calc(100% / 6);
            }

            &:nth-child(3) .item {
              width: calc(100% / 2);
            }
          }
        }
      }

      &_census {
        &__basic {
          &-item {
            &.list {
              .list {
                padding: 10px 15px;

                .count {
                  p {
                    font-size: 22px;
                  }
                }
              }
            }
          }
        }

        &__lately {
          .content {
            padding: 5px;

            #lately {
              height: 240px;
            }
          }
        }

        &__server {
          grid-template-columns: unset;

          &-item {
            .content {
              padding: 5px;

              #work,
              #flow {
                height: 240px;
              }
            }
          }
        }
      }
    }
  }

  @media (max-width: 650px) {
    .joe {
      &_index {
        &__banner {
          .swiper-container {
            .item {
              .title-row {
                padding: 10px 12px;
              }
            }

            .swiper-pagination {
              display: none;
            }
          }

          &-empty {
            height: 240px;
          }
        }
      }
    }

    .joe_donate {
      display: none !important;
    }

    .joe_vplayer {
      width: 100%;
      height: 220px !important;
    }

    .joe_pdf {
      iframe {
        width: 100%;
        height: 220px !important;
      }
    }
  }

  @media (max-width: 500px) {
    .joe {
      &_vplayer {
        height: 225px;
      }

      &_header {
        height: 50px;

        &__above {
          .joe_container {
            margin: 0 auto;
            height: 50px;
            justify-content: space-between;
          }

          &-nav {
            display: none;
          }

          &-logo {
            height: 50px;

            img {
              max-height: 45px;
            }
          }

          &-searchicon {
            margin-left: 0;
          }

          &-slideicon {
            display: block;
          }
        }

        &__below {
          display: none;
        }

        &__searchout {
          top: 50px;
        }
      }

      &_bread {
        margin: 0 auto;
        padding: 15px 15px 0 5px;
      }

      &_main {
        padding-bottom: 0;

        &_container {
          padding: 0;
          margin: 15px auto 20px !important;
        }

        .code-toolbar {
          .toolbar .toolbar-item span {
            font-size: 13px;
          }

          pre[class*="language-"] {
            font-size: 13px !important;

            &:before {
              left: 10px !important;
              box-shadow: 16px 0 #fdbc40, 32px 0 #35cd4b !important;
            }

            &:after {
              top: 30px !important;
            }

            &.line-numbers {
              .line-numbers-rows {
                width: 2.4em !important;
              }

              code {
                padding: 12px 12px 12px 40px !important;
              }
            }
          }
        }
      }

      &_index {
        border-radius: 0;

        &__banner {
          padding: 0;
          border-radius: 0;

          .swiper-container {
            height: 220px;
            border-radius: 0;

            .swiper-slide {
              border-radius: 0;
            }

            .item {
              height: 220px;

              .title-row {
                padding: 8px 10px;

                .title {
                  font-size: 14px;
                  font-weight: normal;
                }

                .subtitle {
                  display: none;
                }
              }
            }

            .swiper-button-next,
            .swiper-button-prev {
              display: none;
            }
          }

          &-recommend {
            gap: 10px;

            .item {
              height: 100px;
            }
          }

          &-empty {
            height: 200px;
            border-radius: 0;
          }
        }

        &__hot {
          &-list {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;

            .item .link .inner .image {
              height: 70px;
            }
          }
        }

        &__ad {
          &-link {
            .image {
              height: 120px;
            }
          }
        }

        &__title {
          &-notice {
            display: none;
          }

          &-title {
            .item {
              display: none;

              &:nth-child(1),
              &:nth-child(2) {
                display: block;
              }
            }
          }
        }
      }

      &_list {
        &__item {
          padding: 12px 0;

          .information {
            .title {
              font-size: 16px;
            }

            .abstract {
              display: none;
            }
          }

          .meta {
            .last {
              display: none !important;
            }
          }

          &.single {
            .thumbnail {
              height: 130px;
              margin-bottom: 0;

              time,
              svg {
                display: none;
              }
            }
          }

          &.default {
            .information {
              .title {
                font-size: 15px;
              }
            }

            .thumbnail {
              width: 120px;
              height: 80px;
              margin-right: 10px;

              time,
              svg {
                display: none;
              }
            }

            .title {
              margin-bottom: 0;
            }

            .meta {
              .items {
                li {
                  display: none;

                  &:nth-child(1) {
                    display: block;

                    &::after {
                      display: none;
                    }
                  }

                  &:nth-child(2) {
                    display: none;
                  }
                }
              }
            }
          }

          &.multiple {
            .thumbnail {
              grid-template-rows: 70px;
              gap: 10px;
            }
          }

          &.none {
            .information {
              height: 120px;
            }

            .abstract {
              display: -webkit-box;
              font-size: 13px;
            }
          }
        }

        &__loading {
          .item {
            .thumbnail {
              width: 120px;
              height: 80px;
            }

            .information {
              .title {
                margin-bottom: 10px;
                height: 20px;
              }

              .abstract {
                p {
                  height: 15px;
                }
              }
            }
          }
        }
      }

      &_journals {
        &__list {
          .joe_journal__item {
            padding: 0 0 12px 0;

            &:before {
              display: none;
            }

            .joe_journal_date {
              left: 0;
            }

            .joe_journal_block {
              border-radius: 0 10px 10px 10px;
            }

            .joe_journal_body {
              padding: 8px 8px 14px;
            }
          }
        }
      }

      &_post {
        &__pagination {
          padding: 0 10px;
        }
      }

      &_photos {
        &__type {
          margin-bottom: 0;
          padding-bottom: 12px;
          border-radius: 0;
        }

        &__list {
          grid-template-columns: repeat(2, 1fr);
          gap: 6px;
          padding: 0 6px 15px;
          background: var(--background);

          .item {
            border-radius: 4px;

            &:before,
            &:after {
              display: none;
            }
          }

          .info {
            display: none;
          }
        }

        &__pagination {
          justify-content: center;
        }
      }

      &_archive {
        border-radius: 0;
      }

      &_detail {
        padding: 12px;
        border-radius: 0;

        &__friends {
          grid-template-columns: repeat(1, 1fr);
        }

        &__title {
          padding-top: 30px;
          font-size: 18px;
        }

        &__count {
          &-information {
            width: 100%;

            .avatar {
              display: none;
            }

            .meta {
              width: 100%;
              height: unset;

              .author {
                display: none;
              }

              .item {
                justify-content: center;

                span:nth-child(4),
                span:nth-child(5),
                span:nth-child(8),
                span:nth-child(9) {
                  display: none;
                }
              }
            }
          }

          &-created {
            display: none;
          }

          &::after {
            display: none;
          }
        }

        &__overdue {
          padding-top: 0;

          &-wrapper {
            padding: 10px;

            .title {
              margin-bottom: 5px;
              font-size: 14px;

              .icon {
                margin-right: 5px;
              }
            }

            .content {
              font-size: 13px;
              padding-left: 0;
            }
          }
        }

        &__article {
          padding: 10px 0;
          font-size: 14px;

          pre[class*="language-"] {
            font-size: 13px;
          }

          &-video {
            .play {
              .box {
                iframe {
                  height: 225px;
                }
              }
            }

            .episodes {
              .box {
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;
              }
            }
          }
        }

        &__leaving {
          &-list {
            height: 300px;

            .item {
              font-size: 12px;
              width: 160px;
              min-height: unset;

              .user {
                padding: 0 8px;
                height: 35px;

                .avatar {
                  width: 15px;
                  height: 15px;
                }
              }

              .wrapper {
                padding: 8px;

                .content {
                  height: 109px;
                  line-height: 18px;

                  .owo_image {
                    max-height: 18px;
                  }
                }
              }
            }
          }
        }

        &__copyright {
          .content {
            .item {
              font-size: 13px;

              .icon {
                width: 16px;
                height: 16px;
              }
            }
          }
        }

        &__related {
          &-content {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;

            .item {
              img {
                height: 80px;
              }

              h6 {
                font-size: 12px;
              }
            }
          }
        }
      }

      &_video {
        &__list {
          &-item {
            grid-template-columns: repeat(2, 1fr);

            .item {
              .thumb {
                height: 200px;
              }
            }
          }
        }

        &__pagination {
          justify-content: center;
        }

        &__detail {
          &-info {
            .thumbnail {
              width: 125px;
              height: 180px;
            }

            .description {
              dt {
                font-size: 16px;
                margin-bottom: 8px;
              }

              dd {
                font-size: 12px;
                margin-bottom: 5px;
                line-height: 20px;
                max-height: 40px;

                &:not(:last-child) {
                  -webkit-line-clamp: 1;
                }
              }
            }
          }
        }

        &__player {
          &-play {
            height: 225px;
          }
        }

        &__source {
          &-list {
            grid-template-columns: repeat(3, 1fr);
          }
        }
      }

      &_live {
        &__pagination {
          justify-content: center;
        }

        &__list {
          grid-template-columns: repeat(1, 1fr);
        }

        &__play {
          &-player {
            height: 185px;
          }
        }
      }

      &_footer {
        .joe_container {
          flex-direction: column;
          justify-content: center;
          margin-bottom: 0;

          >.item {
            padding: 5px 0;
            text-align: center;
          }

          .site_life {
            margin: 0;
          }
        }
      }

      &_owo {
        &__contain {
          .box .scroll {
            .item {
              width: calc(100% / 6);
            }

            &:nth-child(3) .item {
              width: calc(100% / 2);
            }
          }
        }
      }

      &_census {
        &__basic {
          &-item {
            &.list {
              .list {
                padding: 10px 15px;

                .count {
                  p {
                    font-size: 22px;
                  }
                }
              }
            }
          }
        }

        &__lately {
          .content {
            padding: 5px;

            #lately {
              height: 240px;
            }
          }
        }

        &__server {
          grid-template-columns: unset;

          &-item {
            .content {
              padding: 5px;

              #work,
              #flow {
                height: 240px;
              }
            }
          }
        }
      }

      &_action {
        bottom: 40px;
        right: 20px;
      }
    }

    .page-index {
      margin-top: 0 !important;

      .joe_main {
        padding-top: 0;
      }
    }

    .page-links {
      .links-group {
        padding-left: 0 !important;
      }

      .joe_detail__friends {
        padding-left: 0;
      }

      .link-requirement {
        padding-left: 6px;
      }
    }

    .joe_comment {
      padding: 15px;

      .joe_comment_box {
        h2 {
          padding: 20px 100px;
          font-size: 16px;
        }
      }
    }
  }

  @media (max-width: 375px) {
    .joe {
      &_index {
        &__banner {
          &-empty {
            height: 170px;
          }
        }
      }
    }
  }
}